<template>
  <div class="device-card">
    <div class="card-header">
      <span
        >设备资源号：<span
          ><router-link :to="toUrl">{{ resourceId }}</router-link></span
        ></span
      >
    </div>
    <div class="card-body">
      <img src="@/assets/images/mixing-machine-2d.png" width="300px" />
    </div>
    <div class="card-footer">
      <el-progress
        class="footer-item"
        text-inside
        :format="getMixingProgressText"
        :percentage="mixingPercentage"
        :stroke-width="20"
        :status="mixingStatus"
        striped
      />
      <el-progress
        class="footer-item"
        text-inside
        :format="getDispersionProgressText"
        :percentage="dispersionPercentage"
        :stroke-width="20"
        :status="dispersionStatus"
        striped
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed } from "vue";

const { deviceId } = defineProps({
  resourceId: String,
  deviceId: String,
  mixingPercentage: Number,
  dispersionPercentage: Number,
  mixingStatus: {
    type: String,
    default: "normal"
  },
  dispersionStatus: {
    type: String,
    default: "normal"
  }
});

const toUrl = computed(() => {
  const uri = encodeURI(
    "/device-maintenance/maintenance?deviceId=" + encodeURIComponent(deviceId ?? "")
  );
  return uri;
});

function getMixingProgressText(percentage: number) {
  return `搅拌 ${percentage}%`;
}

function getDispersionProgressText(percentage: number) {
  return `分散 ${percentage}%`;
}
</script>

<style lang="scss" scoped>
.device-card {
  box-shadow: 0px 0px 4px black;
  border-radius: 8px;
  padding: 8px;
  background-color: lightblue;
  height: 460px;
  width: 316px;

  .card-header {
    margin-bottom: 8px;
    color: black;
    span {
      font-weight: bold;
    }
  }
  .card-body {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .card-footer {
    .footer-item {
      margin-top: 8px;
      :deep(.el-progress-bar__innerText) {
        color: black;
        span {
          font-weight: bold;
        }
      }
    }
  }
}
</style>